<template>
  <div>
    <el-dialog :visible.sync="dialogFormVisible">
      <!-- 小程序 -->
      <el-form ref="subform1" :model="form" :rules="rules">
        <!-- 名称 -->
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.hospitalName" type="text" placeholder="请输入名称" />
        </el-form-item>
        <!-- 排序 -->
        <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
          <el-input-number
            v-model="form.sort"
            :disabled="isDisabled"
            :min="1"
            style="width:150px; margin-right:16px; margin-bottom:10px;"
          />
        </el-form-item>
        <!-- 跳转链接 -->
        <el-form-item label="跳转链接" :label-width="formLabelWidth" prop="link">
          <el-input v-model="form.locationDes" type="text" placeholder="请输入跳转链接" />
        </el-form-item>
        <!-- 添加图片 -->
        <el-form-item label="添加图片" :label-width="formLabelWidth" prop="img">
          <el-upload
            action="https://mpingweb.yuepinyuemei.com/api/upload"
            :data="{
              dirPath: 'authentication',
              upload_status: true }"
            :multiple="false"
            :limit="1"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-success="upload_main"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="common.img_url+img_main" alt />
          </el-dialog>
          <img width="20%" :src="common.img_url+form.adPicture" alt />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="closeMask">取 消</el-button>
        <el-button
          v-if="!isDisabled&&info&&!info.id"
          type="primary"
          plain
          @click="submitInfo('subform1')"
        >确 定</el-button>
        <!-- <el-button v-if="!isDisabled&&info&&info.id" type="primary" plain @click="resetInfo">修 改</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { provinceList } from "../../api/province";
import { addHospital } from "../../api/hospitalAdd";
export default {
  props: {
    isHidden: {
      type: Boolean,
      default: false,
    },
    detailInfo: {
      id: "",
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formLabelWidth: "120px", // 列表label宽度
      form: {
        name: "", // 名称
        link: "", // 跳转链接
        img: "", // 图片
        sort: 0, // 排序
      },
      info: this.detailInfo,
      dialogFormVisible: this.isHidden, // 是否显示弹出框
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        link: [
          {
            required: true,
            message: "请输入跳转链接",
            trigger: "blur",
          },
        ],
        img: [
          {
            required: true,
            message: "请上传图片",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "请输入排序",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    dialogFormVisible() {
      this.$emit("checkMask", this.dialogFormVisible);
    },
  },

  mounted() {},
  methods: {
    // 图片-移除
    handleRemove() {
      this.img_main = "";
    },
    // 图片-上传
    upload_main(res) {
      this.img_main = res.data;
    },
    // 取消
    closeMask() {
      this.$refs["subform1"].resetFields();
      this.dialogFormVisible = false;
      this.$emit("checkMask", this.dialogFormVisible);
    },
    // 确认
    submitInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.checkInfo()) {
            // 提交表单 隐藏弹窗
            addHospital({
              hospitalName: this.form.hospitalName,
              province: this.form.province_id,
              locationDes: this.form.locationDes,
            })
              .then((res) => {
                this.$message({
                  showClose: true,
                  message: "添加" + res.data.msg,
                  type: res.data.code === 0 ? "success" : "error",
                });
                this.$emit("refresh", {});
                this.closeMask();
              })
              .catch((res) => {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "error",
                });
              });
          } else {
            // 弹出错误框
            this.$message({
              showClose: true,
              message: "请填写必要参数",
              type: "error",
            });
          }
        }
      });
    },
    // 检测参数是否都填写完毕
    checkInfo() {
      return !(
        !this.form.hospitalName ||
        !this.form.province ||
        !this.form.locationDes
      );
    },
  },
};
</script>
<style scoped>
</style>
